<script setup>
import {ref} from "vue";

const userName = ref([
  {message: '长度在 1 到 5 个字符'},
  {message: '请填写用户名'},
])

</script>

<template>
  <el-card class="card">
    <template #header>
      <span style="font-size:15px">卡片名称</span>
      <el-button class="button" type="text" style="padding-left:220px;font-size: 15px;">操作按钮</el-button>
    </template>
    <div v-for="i in userName" :key="i" class="text item">{{ '列表内容 ' + i.message }}</div>
  </el-card>

</template>

<style scoped>
.card {
  width: 400px;
  position: absolute;
  left: 400px;
  top: 200px;
}

.text {
  font-size: 15px;
}

.item {
  margin-bottom: 10px;
}

</style>
